<template>
  <div>
    <div class="changeBtn">
      <div class="default" ref="btn" @click="util"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    themeFlag: {
      type: Boolean
    }
  },
  methods: {
    util() {
      const btn = this.$refs.btn
      if (this.themeFlag) {
        btn.setAttribute('class', 'default active')
      } else {
        btn.setAttribute('class', 'default')
      }
      this.$emit('changeTheme', !this.themeFlag)
    }
  },
  created() {
    this.$nextTick(() => {
      const btn = this.$refs.btn
      if (this.themeFlag) {
        btn.setAttribute('class', 'default')
      } else {
        btn.setAttribute('class', 'default active')
      }
    })
  }
}
</script>

<style scoped lang="scss">
body {
  background: #d9deea;
}
.changeBtn {
  width: 90px;
  transform: scale(0.4);
}
.default {
  position: relative;
  width: 220px;
  height: 90px;
  background: radial-gradient(
      circle at 18% 20px,
      #fff,
      #fff 6px,
      transparent 7px,
      transparent
    ),
    radial-gradient(
      circle at 35% 45px,
      #fff,
      #fff 1px,
      transparent 2px,
      transparent
    ),
    radial-gradient(
      circle at 10% 70px,
      #fff,
      #fff 2.5px,
      transparent 3.5px,
      transparent
    ),
    radial-gradient(
      circle at 25% 15px,
      #fff,
      #fff 3px,
      transparent 4px,
      transparent
    ),
    radial-gradient(
      circle at 15% 50px,
      #fff,
      #fff 1.5px,
      transparent 2.5px,
      transparent
    ),
    radial-gradient(
      circle at 30% 75px,
      #fff,
      #fff 5px,
      transparent 6px,
      transparent
    ),
    radial-gradient(
      circle at 5% 30px,
      #fff,
      #fff 0.5px,
      transparent 1.5px,
      transparent
    ),
    radial-gradient(
      circle at 25% 60px,
      #fff,
      #fff 0.5px,
      transparent 1.5px,
      transparent
    ),
    radial-gradient(
      circle at 7% 35px,
      #fff,
      #fff 0.5px,
      transparent 1.5px,
      transparent
    ),
    linear-gradient(90deg, #2b303e, #2b303e 50%, #5a81b4 50%, #5a81b4);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  background-position: 100% 0;
  border-radius: 90px;
  box-shadow: 0 -3px 4px #999, inset 0 3px 5px #333, 0 4px 4px #ffe,
    inset 0 -3px 5px #ddd;
  cursor: pointer;
  overflow: hidden;
  transition: 0.5s all;
  &::before,
  &::after {
    content: '';
    position: absolute;
    transition: 0.5s all;
  }
  &::before {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #e9cb50;
    inset: 7.5px;
    box-shadow: 0 0 5px #333, inset 2px 2px 3px #f8f4e4,
      inset -2px -2px 3px #665613;
    z-index: 1;
  }
  &::after {
    width: 70px;
    height: 70px;
    inset: 10px;
    border-radius: 50%;
    box-shadow: 10px 60px 0 10px #fff, 65px 60px 0 5px #fff,
      95px 70px 0 10px #fff, 135px 45px 0 5px #fff, 170px 35px 0 10px #fff,
      195px -5px 0 10px #fff, -10px 0 0 50px rgba(255, 255, 255, 0.2),
      15px 0 0 50px rgba(255, 255, 255, 0.15),
      40px 0 0 50px rgba(255, 255, 255, 0.21), 10px 40px 0 10px #abc1d9,
      70px 35px 0 10px #abc1d9, 95px 40px 0 10px #abc1d9,
      135px 20px 0 10px #abc1d9, 155px 15px 0 10px #abc1d9,
      190px -20px 0 10px #abc1d9;
  }
}
div:hover::before {
  filter: contrast(90%) brightness(110%);
  scale: 1.05;
}
div.active {
  background-position: 0 0;

  &::before {
    translate: 130px;
    background: radial-gradient(
        circle at 50% 20px,
        #939aa5,
        #939aa5 6.5px,
        transparent 7px,
        transparent
      ),
      radial-gradient(
        circle at 35% 45px,
        #939aa5,
        #939aa5 11.5px,
        transparent 12px,
        transparent
      ),
      radial-gradient(
        circle at 72% 50px,
        #939aa5,
        #939aa5 8.5px,
        transparent 9px,
        transparent
      ),
      radial-gradient(#cbcdda, #cbcdda);
  }
  &::after {
    transform: translate(130px);
    box-shadow: 10px 60px 0 10px transparent, 65px 60px 0 5px transparent,
      95px 70px 0 10px transparent, 135px 45px 0 5px transparent,
      170px 35px 0 10px transparent, 195px -5px 0 10px transparent,
      10px 0 0 50px rgba(255, 255, 255, 0.2),
      -15px 0 0 50px rgba(255, 255, 255, 0.15),
      -40px 0 0 50px rgba(255, 255, 255, 0.21), 10px 40px 0 10px transparent,
      70px 35px 0 10px transparent, 95px 40px 0 10px transparent,
      135px 20px 0 10px transparent, 155px 15px 0 10px transparent,
      190px -20px 0 10px transparent;
  }
}
</style>
